import { createStyles } from 'antd-style';

/**
 * Slider 扩展样式 Hook
 * 
 * ⚠️ 此文件仅提供 ConfigProvider 主题系统无法实现的特殊交互效果
 * 
 * 基础样式（颜色、字体、间距、hover/active 状态等）请通过以下方式配置：
 * 1. 修改 DSL 文件 (Slider.json)
 * 2. 更新主题配置 (themes/slider.ts)
 * 3. 在应用根组件使用 ConfigProvider 应用主题
 * 
 * @example
 * ```tsx
 * const { styles } = useSliderStyles();
 * <Slider className={styles.enhanced}>增强效果</Slider>
 * ```
 */
export const useSliderStyles = createStyles(({ token, css }) => {
  return {
    /**
     * 基础增强样式 - 应用于所有 Slider 组件
     */
    enhancedSlider: css`
      /* 基础增强样式 - 应用于所有 Slider 组件 */
    `,

    /**
     * 增强样式 - 添加过渡效果
     */
    enhanced: css`
      .ant-slider-track {
        transition: background-color ${token.motionDurationMid};
      }
      
      .ant-slider-handle {
        transition: all ${token.motionDurationMid};
      }
    `,

    /**
     * 自定义轨道颜色
     */
    customTrack: css`
      .ant-slider-track {
        background-color: ${token.colorPrimary};
      }
    `,
  };
});

